﻿@{
    ViewBag.Title = "TabStrip : Load Tabs";
}

<h2>TabStrip : Load Tabs</h2>

<h3>Sample</h3>

@{
    Html.Telerik().TabStrip()
        .Name("SampleTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Tab 1")
                .Selected(true)
                .Content(
                    @<text>
                    <p>Content for the first tab.</p>
                    </text>
                );
            tabstrip.Add()
                .Text("Tab 2")
                .Content(
                    @<text>
                    <p>Content for the second tab.</p>
                    </text>
                );
        })
        .Render();
}

<br />

<div style="height:100px; width:100%;">
    <fieldset style="width:400px; float:left; margin-right:10px;"><legend>Load Tab</legend>
        <br />
        New Tab Name: @Html.TextBox("newTabName")
        <button onclick="loadTab()">Load</button>
    </fieldset>

    <fieldset style="width:400px; float:left;"><legend>Remove Tab by Text</legend>
        <br />
        Tab to Remove: <select id="tabList"><option value="Tab 1">Tab 1</option><option value="Tab 2">Tab 2</option></select>
        <button onclick="removeTabByText()">Remove</button>
    </fieldset>

    <fieldset style="width:400px; float:left;"><legend>Remove Tab by Index</legend>
        <br />
        Tab to Remove: <select id="tabListByIndex"><option value="0">Tab 1</option><option value="1">Tab 2</option></select>
        <button onclick="removeTabByIndex()">Remove</button>
    </fieldset>
</div>

<h3>Documentation</h3>
<p>
When a URL is passed into the addTab() function, the the jQuery.load() function is used to load data from the server and place the returned HTML into 
the contents for a new tab.  In this example, the load function calls the Home Controller GetTabContent Action along with the name of the tab and 
returns the TabContent partial view with the name of the tab in the contents.

To do th is, set the following attributes in the json object parameter:
<ul>
    <li>text: text for the tab.</li>
    <li>url: the url for the contents to be placed in the tab.</li>
    <li>data: OPTIONAL data to post to the server.</li>
    <li>callback function: OPTIONAL callback function that executes after the tab contents are loaded.</li>
</ul>
</p>
<p>
Here is the code that gets the partial view, adds the tab and adds the tab name to the dropdownlist of tabs:
</p>
<pre class="code">
var tabName = $('#newTabName').val();

var tabStrip = $('#SampleTabStrip').data('tTabStrip');
tabStrip.addTab({
    text: tabName, 
    url: "@Url.Content("~")TabStrip/GetTabContent", 
    data: { tabName: tabName },
    complete: function() {
        tabStrip.selectTab({ text: tabName });
        $('#tabList').append($('<option></option>').val(tabName).html(tabName));
    }
});
</pre>

<p>
When the tab is removed, the removeTab() function is called to remove the tab.  The removeTab() function
takes a json object as the parameter where one of the 2 attributes must be set.  The attributes are:
<ul>
    <li>text: the current text for the tab.</li>
    <li>index: zero based index for the tab.</li>
</ul>
</p>
<p>
Here is the code that removes the tab and removes the tab name from the dropdownlist of tabs:
</p>
<pre class="code">
var tabName = $('#tabList option:selected').val();
var tabStrip = $('#SampleTabStrip').data('tTabStrip');
tabStrip.removeTab({ text: tabName });
if (tabStrip.getTab({ text: tabName }).length == 0) {
    $('#tabList option:selected').remove();
}
</pre>

<script type="text/javascript">
    closeTab = function (idx) {
        $('#SampleTabStrip').data('tTabStrip').removeTab({ index: idx });
    }

    loadTab = function () {
        var tabName = $('#newTabName').val();

        if (tabName.length > 0) {
            var tabStrip = $('#SampleTabStrip').data('tTabStrip');
            tabStrip.addTab({ 
                text: tabName, 
                url: "@Url.Content("~")TabStrip/GetTabContent", 
                data: { tabName: tabName },
                complete: function() {
                    tabStrip.selectTab({ text: tabName });
                    $('#tabList').append($('<option></option>').val(tabName).html(tabName));
                }
            });
        }
        else {
            alert('Enter the text for the new tab');
        }
    }
    removeTabByText = function () {
        var tabName = $('#tabList option:selected').val();
        var tabStrip = $('#SampleTabStrip').data('tTabStrip');
        tabStrip.removeTab({ text: tabName });
        if (tabStrip.getTab({ text: tabName }).length == 0) {
            $('#tabList option:selected').remove();
        }
    }

    removeTabByIndex = function () {
        var tabIndex = $('#tabListByIndex option:selected').val();
        var tabStrip = $('#SampleTabStrip').data('tTabStrip');
        tabStrip.removeTab({ index: tabIndex });
        if (tabStrip.getTab({ index: tabIndex }).length == 0) {
            $('#tabListByIndex option:selected').remove();
        }
    }
</script>
